import React, { useState } from 'react'
import { Card, Row, Col, Input, Button, Space, Form, Select } from 'antd'
import { connect } from 'umi'
import setleIndex from '@/pages/index.less'
import style from "../index.less"
const { Option } = Select;
function IndexPage(props: any) {
  const { dispatch } = props;
  const [form] = Form.useForm();
  const [pageInfo] = useState({ page: 1, pageSize: 12 });
  const onFinish = (values: any) => {
    // 搜索
    dispatch({
            type: 'page/INIT',
            pageInfo: {
              ...pageInfo,
              ...values,
            },
          })
  };

  const onFinishFailed = (errorInfo: any) => {
  };
  return (
    <div className={setleIndex.mt20}>
      <Card>
        <Form
          form={form}
          name="basic"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Row>
            <Col span={7} key={0}>
              <Form.Item label="名称" name="name">
                <Input placeholder="请输入名称" style={{ width: '200px' }} />
              </Form.Item>
            </Col>
            <Col span={7} key={1}>
              <Form.Item label="路径" name="path">
                <Input placeholder="请输入路径" style={{ width: '200px' }} />
              </Form.Item>
            </Col>
            <Col span={7} key={2}>
              <Form.Item label="状态" name="status">
                <Select style={{ width: '200px' }}>
                  <Option value="publish">已发布</Option>
                  <Option value="draft">草稿</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row className={style.search}>
            <Col span={5}>
              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Space>
                  <Button type="primary" htmlType="submit">
                    搜索
                  </Button>
                  <Button onClick={() => {
                    form.resetFields()
                  }}>
                    重置
                  </Button>
                </Space>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Card>
    </div>
  );
}
// connect接收两个参数
// 1. 函数 mapStateToProps
const mapStateToProps = (state: any) => {
  const { page } = state
  return page
}
export default connect(mapStateToProps)(IndexPage)
